<template>
<div style="text-align: center" class="border">
    <!--<lar-ui-plane >-->
        <!--&lt;!&ndash;<h3 class="table&#45;&#45;title">图表统计2</h3>&ndash;&gt;-->
        <!--<el-row>-->
            <!--<el-col :span="24">-->
                <!--<lar-chart-bar>-->
                <!--</lar-chart-bar>-->
            <!--</el-col>-->
        <!--</el-row>-->
    <!--</lar-ui-plane>-->
    <table>
        <tr>
            <td colspan="10"><strong>订单统计</strong></td>
        </tr>
        <tr>
            <td colspan="10" width="100%" style="padding: 15px 0">
                <span style="padding-right: 20px">
                    <el-dropdown size="medium" split-button type="primary" @command="selectDepart">
                        {{defaultDepatTitle?defaultDepatTitle:'请选择食堂'}}
                        <el-dropdown-menu slot="dropdown" >
                            <template v-for="item in depart">
                                <el-dropdown-item :command="item">{{item.title}}</el-dropdown-item>
                            </template>
                        </el-dropdown-menu>
                    </el-dropdown>
                </span>
                <span style="padding-right: 20px">
                就餐开始时间：
                <el-date-picker value-format="yyyy-MM-dd" format="yyyy 年 MM 月 dd 日" v-model="startDate" @change="selectDate" type="date" placeholder="选择开始日期">
                </el-date-picker>
                </span>
                    <span style="padding-right: 20px">
                就餐结束时间：
                <el-date-picker value-format="yyyy-MM-dd" format="yyyy 年 MM 月 dd 日" v-model="endDate" type="date" placeholder="选择结束日期">
                </el-date-picker>
                    </span>
                <el-button type="primary" @click="getCountInfo">查询</el-button>
            </td>
        </tr>
        <tr>
            <td width="15%">
                <!--<el-dropdown size="medium" split-button type="primary" @command="selectDepart">-->
                    <!--{{defaultDepatTitle?defaultDepatTitle:'请选择食堂'}}-->
                    <!--<el-dropdown-menu slot="dropdown" >-->
                        <!--<template v-for="item in depart">-->
                            <!--<el-dropdown-item :command="item">{{item.title}}</el-dropdown-item>-->
                        <!--</template>-->
                    <!--</el-dropdown-menu>-->
                <!--</el-dropdown>-->
            </td>
            <td>早餐</td>
            <td colspan="4">午餐</td>
            <td colspan="4">晚餐</td>
        </tr>
        <tr>
            <td>
                &nbsp;
            </td>
            <td >
                堂食
            </td>
            <td width="6%">
                堂食
            </td>
            <td  width="6%">
                外带
            </td>
            <td  width="6%">
                加班餐
            </td>
            <td  width="6%">
                业务餐
            </td>
            <td width="6%">
                堂食
            </td>
            <td  width="6%">
                外带
            </td>
            <td  width="6%">
                加班餐
            </td>
            <td  width="6%">
                业务餐
            </td>
        </tr>
        <tr>
            <td>
                {{defaultDepatTitle}}
            </td>
            <td >
                <strong>{{dataCount.morning_meal}}</strong>
            </td>
            <!--zhong-->
            <td width="8%">
                <strong>{{dataCount.midday_meal_tangshi}}</strong>
            </td>
            <td  width="8%">
                <strong>{{dataCount.midday_meal_waidai}}</strong>
            </td>
            <td  width="8%">
                <strong>{{dataCount.midday_meal_jiaban}}</strong>
            </td>
            <td  width="8%">
                <strong>{{dataCount.midday_meal_yewu}}</strong>
            </td>
            <!--wan-->
            <td width="8%">
                <strong>{{dataCount.night_meal_tangshi}}</strong>
            </td>
            <td  width="8%">
                <strong>{{dataCount.night_meal_waidai}}</strong>
            </td>
            <td  width="8%">
                <strong>{{dataCount.night_meal_jiaban}}</strong>
            </td>
            <td  width="8%">
                <strong>{{dataCount.night_meal_yewu}}</strong>
            </td>
        </tr>
    </table>
</div>
</template>
<script>
    export default {
        data() {
            return {
                pickerOptions1: {
                    disabledDate(time) {
                        return time.getTime() > Date.now();
                    },
                    shortcuts: [{
                        text: '今天',
                        onClick(picker) {
                            picker.$emit('pick', new Date());
                        }
                    }, {
                        text: '昨天',
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24);
                            picker.$emit('pick', date);
                        }
                    }, {
                        text: '一周前',
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', date);
                        }
                    }]
                },
                startDate: this.getDate(),
                endDate: this.getDate(),
                depart: [],
                dataCount: [],
                defaultDepatId: null,
                defaultDepatTitle: null,
            };
        },
        created() {
          this.getDepartMent();
          console.info(22222,this.getDate())
        },
        methods: {
            getDepartMent(){
                this.$http.get('common/department_name_info',{  ttl: 3600 })
                .then((response)=>{
                    if (response.data.status==1) {
                        this.depart = response.data.data;
                        this.defaultDepatId = this.depart[0].id
                        this.defaultDepatTitle = this.depart[0].title;
                        this.getCountInfo();
                    }
                    // console.info(2222,response.data.data);
                })
                .catch((error)=>{
                    this.$message.error('请求错误！');
                });
            },
            selectDepart(command) {
                this.defaultDepatId = command.id;
                this.defaultDepatTitle = command.title;
                // this.getCountInfo();
                // this.$message('click on item ' + command);
            },
            selectDate(picker) {
                // console.info(this.startDate,this.endDate);
                // this.getCountInfo();
            },
            getCountInfo() {
                console.info(1111111)
                let url =  this.$larfree.httpQuery({
                    order_status: 3,
                    department_id: this.defaultDepatId,
                    meal_start_date: this.startDate,
                    meal_end_date: this.endDate,
                }, 'common/order_number_count');
                this.$http.get(url,{  ttl: 3600 })
                    .then((response)=>{
                        if (response.data.status==1) {
                            this.dataCount = response.data.data;
                        }
                        // console.info(2222,this.dataCount);
                    })
                    .catch((error)=>{
                        this.$message.error('请求错误！');
                    });
            },
            getDate() {
                const date = new  Date();
                const year = date.getFullYear()
                const month = date.getMonth() + 1
                const day = date.getDate()
                const hour = date.getHours()
                const minute = date.getMinutes()
                const second = date.getSeconds()
                const formatNumber = n => {
                    n = n.toString()
                    return n[1] ? n : '0' + n
                }
                return [year, month, day].map(formatNumber).join('-');
            }
        }
    }
</script>
<style scoped>
    .border{
        padding: 30px;
    }
    table{
        background-color: #fff;
        border:1px #ddd solid;
        width: 100%;
    }
    table tr td{
        height: 50px;
        font-size: 16px;
        border:1px #ddd solid;
        border-left:0
    }
</style>